<template>
    <div>
        <div v-if="active==1">

            <el-form :inline="true" :model="params" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="params.value" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="params.xlk" placeholder="请选择">
                        <el-option label="---" value=""></el-option>
                        <el-option label="案号查询" value="caseNo"></el-option>
                        <el-option label="归档人查询" value="borrowFilePeople"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
                <el-button type="primary" @click="addBtn">添加</el-button>
                <el-button type="primary" @click="pldel">批量删除</el-button>
                <el-button type="primary" @click="setReturned">设为已归还</el-button>

                <el-button type="primary" @click="exportExcel">导出</el-button>
            </el-form>


            <el-table
                    :data="pageResult.records"
                    border
                    style="width: 100%"
                    tooltip-effect="dark"
                    ref="multipleTable"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        fixed
                        prop="id"
                        label="编号">
                </el-table-column>
                <el-table-column
                        prop="caseNo"
                        label="案号">
                </el-table-column>
                <el-table-column
                        prop="recordNum"
                        label="档案号">
                </el-table-column>
                <el-table-column
                        prop="recordName"
                        label="档案名称">
                </el-table-column>
                <el-table-column
                        prop="borrowFilePeople"
                        label="借档人">
                </el-table-column>
                <el-table-column
                        prop="borrowDate"
                        label="借出时间">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注">
                </el-table-column>
                <el-table-column  fixed="right"
                                  label="操作"
                                  width="200" >
                    <template  slot-scope="scope">
                        <el-dropdown :hide-on-click="true"  @command="handleUpdate">
                            <el-button type="primary">
                                更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="scope.row.id+'-修改'">修改</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>

            <div id="importDiv" v-show="ddd">
                <el-table
                        :data="importTab"
                        border
                        id="aa"
                        style="width: 100%"
                        tooltip-effect="dark"
                       >
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="id"
                            label="编号"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="caseNo"
                            label="案号"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="recordNum"
                            label="档案号"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="recordName"
                            label="档案名称"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="borrowFilePeople"
                            label="借档人"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="borrowDate"
                            label="借出时间"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="remark"
                            label="备注"
                            width="100">
                    </el-table-column>
                </el-table>
            </div>


            <el-footer class="case-exam-footer">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="pageResult.total"
                        :page-size="pageResult.size"
                        class="pagination"
                        @current-change="handleIndexChange"
                >
                </el-pagination>


            </el-footer>
        </div>

        <add-record-archiveslibrary v-on:qx="qx1" v-if="active==2"></add-record-archiveslibrary>

        <update-record-archiveslibrary :id="id" v-on:qx="qx2" v-if="active==3"></update-record-archiveslibrary>
    </div>
</template>

<script>
    import  XLSX from 'xlsx'
    import  FileSaver from 'file-saver'


    import  AddRecordArchiveslibrary from './AddRecordArchiveslibrary.vue'
    import  UpdateRecordArchiveslibrary from './UpdateRecordArchiveslibrary.vue'

    import RecordArchiveslibraryService from '../../../model/mfy/onFile/RecordArchiveslibraryService.js'
    var recordArchiveslibraryService=RecordArchiveslibraryService.getInstance();

    export default {
        name: "dananjieyue",
        data(){
            return{
                active:1,
                pageResult:{},
                params:{},
                recordarchiveslibrary:[],
                id:'',
                multipleSelection:[],
                importTab:[],
                ddd:false
            }
        },
        methods:{
            list(){
                recordArchiveslibraryService.list(this.params).then(response=>{
                     this.pageResult = response.data.data
                })
            },
            listNoPage(){
                recordArchiveslibraryService.listNoPage().then(response=>{
                    this.importTab = response.data.data
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            pldel(){
                if(this.multipleSelection==null || this.multipleSelection==''){
                    this.$message.error("请选择要删除的案件!")
                    return;
                }
                var a = [];
                this.multipleSelection.forEach(i=>{
                    a.push(i.id)
                })
                recordArchiveslibraryService.del(a).then(()=>{
                    this.list();
                })

            },
            setReturned(){
                if(this.multipleSelection==null || this.multipleSelection==''){
                    this.$message.error("请选择要归还的案件!")
                    return;
                }
                    var a = [];
                    this.multipleSelection.forEach(i=>{
                        a.push(i.id)
                    })
                    recordArchiveslibraryService.setReturned(a).then(()=>{
                        this.list();
                    })
            },
            handleIndexChange(index){
                this.params.page = index
                this.list()
            },
            search(){
                this.params.page=1
                this.list()
            },
            handleUpdate(val){
                if(val.split("-")[1]=='修改'){
                    this.active=3;
                    this.id=val.split("-")[0]
                }
            },
            qx1(){
                this.list();
                this.active--
            },
            qx2(){
                this.list();
                this.active=1
            },
            addBtn(){
                this.active++
            },

            exportExcel(){
                // recordArchiveslibraryService.upload1(this.params).then((response)=>{
                //     if(!response){
                //         this.$message.error("下载模板文件失败");
                //         return false;
                //     }
                //     const blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
                //     const downloadElement = document.createElement('a');
                //     const href = window.URL.createObjectURL(blob);
                //     let contentDisposition = response.headers['content-disposition'];  //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
                //     let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
                //     let result = patt.exec(contentDisposition);
                //     let filename = decodeURI(result[1]);
                //     downloadElement.style.display = 'none';
                //     downloadElement.href = href;
                //     downloadElement.download = filename ; //下载后文件名
                //     document.body.appendChild(downloadElement);
                //     downloadElement.click(); //点击下载
                //     document.body.removeChild(downloadElement); //下载完成移除元素
                //     window.URL.revokeObjectURL(href); //释放掉blob对象
                // })
                /* 从表生成工作簿对象 */
                let fix = document.querySelector('#importDiv .el-table__fixed');
                let wb;
                if(fix){ //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
                    wb = XLSX.utils.table_to_book(document.querySelector('#importDiv #aa').removeChild(fix));
                    document.querySelector('#importDiv #aa').appendChild(fix);
                }else{
                    wb = XLSX.utils.table_to_book(document.querySelector('#importDiv #aa'));
                }
                let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '抄表功能.xlsx')
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout)
                }
                return wbout
            }
        },
        created() {
            this.list()
            this.listNoPage()

        },
        components:{

            AddRecordArchiveslibrary,
            UpdateRecordArchiveslibrary
        }
    }
</script>

<style scoped>

</style>
